<template>
  <div>
    <div class="top1">
      <el-row>
        <el-col :span="6">
          工作日期：
          <el-date-picker
            v-model="data.workdate"
            type="date"
            placeholder="选择日期"
            size="mini"
          >
          </el-date-picker>
        </el-col>
        <el-col :span="4"> </el-col>
        <el-col :span="6">
          手机号：
          <el-input
            v-model="data.mobile"
            placeholder="请输入内容"
            size="mini"
          ></el-input>
        </el-col>
        <el-col :span="8"> </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <span>本周工作总结</span>
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="data.worksummary"
          >
          </el-input>
        </el-col>
      </el-row>
    </div>
    <div class="top1">
      <el-row>
        <el-col :span="8"><span>工作明细</span></el-col>
        <el-col :span="12">
          <br />
        </el-col>
        <el-col :span="4">
          <el-button
            type="primary"
            style="margin-right: 80px"
            size="mini"
            @click="dialogFormVisible = true"
            >添加明细</el-button
          >
          <el-dialog title="新增明细" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="工作类型" :label-width="formLabelWidth">
                <el-select v-model="form.worktype" placeholder="请选择活动区域">
                  <el-option label="前端" value="前端"></el-option>
                  <el-option label="后端" value="后端"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="工作事项" :label-width="formLabelWidth">
                <el-input v-model="form.workdesc" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="工作用时" :label-width="formLabelWidth">
                <el-input v-model="form.worktime" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="tianjia">确 定</el-button>
            </div>
          </el-dialog>
        </el-col>
      </el-row>
      <div style="border: 1px solid rgb(183, 179, 179); margin-top: 5px"></div>
      <el-table :data="worklogdetail" style="width: 100%">
        <el-table-column label="工作类型" width="280">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.worktype }}</span>
          </template>
        </el-table-column>
        <el-table-column label="工作事项" width="280">
          <template slot-scope="scope">
            <span>{{ scope.row.workdesc }}</span>
          </template>
        </el-table-column>
        <el-table-column label="工作用时" width="280">
          <template slot-scope="scope">
            <span>{{ scope.row.worktime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220px">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.worklogdetailid)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, sizes,prev, pager, next,jumper"
          :page-size="listQuery.pageSize"
          :page-sizes="[2, 4, 8]"
          :current-page.sync="listQuery.pageNum"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <div class="boot">
      <el-button type="primary" @click="fanhun">返回</el-button>
      <el-button type="primary" @click="baocun">保存</el-button>
    </div>
  </div>
</template>

<script>
import {
  logdetaillist,
  logdetailinster,
  logdetaildelete,
  loginster,
  logdetailupdatalist,
  logcha,
} from "@/api/work";
export default {
  data() {
    return {
      workdate: null,
      data: {
        worklogid: null,
        sysdate: null,
        isable: null,
        workdate: null,
        worksummary: null,
        mobile: null,
        submitdate: null,
        isshow: null,
        userid: null,
      },

      operateType: null,
      listQuery: {
        keyword: null,
        nameCn: null,
        pageNum: 1,
        pageSize: 4,
        worklogid: null,
      },
      total: null,
      listLoading: true,
      dialogFormVisible: false,
      form: {
        worklogdetailid: null,
        worktype: null,
        workdesc: null,
        no: null,
        worktime: null,
        worklogid: null,
      },
      formLabelWidth: "120px",
      worklogdetail: null,
      mobile: null,
    };
  },
  created() {
    /**  接收对象  **/
    const data = this.$route.query.row;
    if (data != undefined || data != null) {
      this.data = data;
      this.cha();
    }

    //  const look = this.$route.query.look;
    //  if (look != undefined || look != null) {
    //   this.chakan = false;
    // }
  },
  methods: {
    cha() {
      //编辑时
      //查询分页
      this.form.worklogid = this.data.worklogid;
      this.listQuery.worklogid = this.data.worklogid;
      this.listLoading = true;
      logdetaillist(this.listQuery).then((response) => {
        this.listLoading = false;
        this.worklogdetail = response.data.records;
        this.total = response.data.total;
        this.totalPage = response.data.pages;
        this.pageSize = response.data.size;
        console.log("查询成功");
      });
    },
    handleSizeChange(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.cha();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.cha();
    },
    chongzhi() {
      this.listQuery.userid = null;
      this.cha();
    },
    shuaxin() {
      //刷新
      (this.form.worklogdetailid = null),
        (this.form.worktype = null),
        (this.form.workdesc = null),
        (this.form.no = null),
        (this.form.worktime = null);
    },
    tianjia() {
      //添加
      this.dialogFormVisible = false;
      console.log("++++++++++++++++:" + this.form.worklogdetailid);
      logdetailinster(this.form).then((response) => {
        this.cha();
        this.shuaxin();
        this.diao1();
      
      });
    },
    handleEdit(row) {
      //编辑打开弹框
      this.dialogFormVisible = true;
      this.form = row;
      console.log("++++++++++++++++:");
    },
    handleDelete(id) {
      //删除
      logdetaildelete(id).then((response) => {
        this.cha();
      });
    },
    fanhun() {
      //返回
      this.$router.push({ path: "/work/index" });
      logdetaildelete1().then((response) => {});
    },
    diao() {
       console.log("修改成功22:"+this.data.mobile);
       const aa=this.data.mobile;
        console.log("修改成功22:"+aa);
      logcha(aa).then(response => {
        this.mobile = response.data;
        console.log("修改成功22:" + thsi.mobile.worklogid);
      });
    },
    diao1() {
      loginster(this.data).then((response) => {
        //修改保存
        console.log("修改成功11:" + this.data.mobile);
      });
    },
    diao2() {
        console.log("修改成功33");
      // this.form.worklogid = this.mobile.worklogid;
      // logdetailupdatalist(this.form).then((response) => {
      //   console.log("修改成功33");
      //   this.fanhun();
      // });
    },
    baocun(){
        this.diao();
        this.diao2()
      this.fanhun();
    },
  },
};
</script>

<style>
.top1 {
  width: 96%;
  margin: 30px;
  padding: 10px 50px;
  border: 1px solid rgb(183, 179, 179);
  border-radius: 5px;
  margin-top: 5px;
}
.boot {
  display: inline-block;
  margin-top: 100px;
  margin-left: 45%;
}
</style>